import { RouteRecordRaw } from "vue-router";
import { HOME_URL, LOGIN_URL } from "@/config/config";

/**
 * baseRouter 基础的路由
 */
const baseRouter: RouteRecordRaw[] = [
    {
        path: "/",
        redirect: HOME_URL
    },
    {
        path: HOME_URL,
        name: "home",
        redirect: "/html/ground-glass-background"
        // component: () => import("@/views/home/index.vue"),
        // meta: {
        //     title: "首页"
        // }
    },
    {
        path: LOGIN_URL,
        name: "login",
        component: () => import("@/views/login/index.vue"),
        meta: {
            title: "登录"
        }
    }
];

/**
 * effectRouter 各种效果的路由
 */
export const effectRouter: RouteRecordRaw[] = [
    {
        path: "/html",
        name: "html",
        meta: {
            title: "HTML视觉",
            icon: "GoldOutlined"
        },
        children: [
            {
                path: "ground-glass-background",
                name: "groundGlassBackground",
                meta: {
                    title: "毛玻璃背景色"
                },
                component: () => import("@/effects/GroundGlassBackground/index.vue")
            },
            {
                path: "button",
                name: "button",
                meta: {
                    title: "按钮合集"
                },
                component: () => import("@/effects/Buttons/index.vue")
            },
            {
                path: "fault-style",
                name: "faultStyle",
                meta: {
                    title: "故障风格"
                },
                component: () => import("@/effects/FaultStyle/index.vue")
            },
            {
                path: "underlined-text",
                name: "underlinedText",
                meta: {
                    title: "文字动态划线"
                },
                component: () => import("@/effects/UnderlinedText/index.vue")
            },
            {
                path: "masonry-layout",
                name: "MasonryLayout",
                meta: {
                    title: "瀑布流"
                },
                component: () => import("@/effects/MasonryLayout/v2/index.vue")
            }
        ]
    },
    {
        path: "/css",
        name: "css",
        meta: {
            title: "css动效",
            icon: "RocketOutlined"
        },
        children: [
            {
                path: "shopping-cart-parabola",
                name: "shoppingCartParabola",
                meta: {
                    title: "购物车抛物线"
                },
                component: () => import("@/effects/ShoppingCartParabola/index.vue")
            },
            {
                path: "parallax-animation",
                name: "ParallaxAnimation",
                meta: {
                    title: "视差动画"
                },
                component: () => import("@/effects/ParallaxAnimation/index.vue")
            },
            {
                path: "roll-horizontally",
                name: "RollHorizontally",
                meta: {
                    title: "滚轮横向滚动"
                },
                component: () => import("@/effects/RollHorizontally/index.vue")
            },
            {
                path: "carousel",
                name: "Carousel",
                meta: {
                    title: "轮播图"
                },
                component: () => import("@/effects/Carousel/index.vue")
            }
        ]
    },
    {
        path: "/canvas",
        name: "canvas",
        meta: {
            title: "canvas动效",
            icon: "NodeIndexOutlined"
        },
        children: []
    },
    {
        path: "/svg",
        name: "svg",
        meta: {
            title: "svg动画",
            icon: "SendOutlined"
        },
        children: []
    }
];

/**
 * staticRouter(静态路由)
 */
export const staticRouter: RouteRecordRaw[] = [...baseRouter, ...effectRouter];

/**
 * errorRouter(错误页面路由)
 */
export const errorRouter = [
    {
        path: "/403",
        name: "403",
        component: () => import("@/views/error/403.vue"),
        meta: {
            title: "403页面"
        }
    },
    {
        path: "/404",
        name: "404",
        component: () => import("@/views/error/404.vue"),
        meta: {
            title: "404页面"
        }
    },
    {
        path: "/500",
        name: "500",
        component: () => import("@/views/error/500.vue"),
        meta: {
            title: "500页面"
        }
    },
    // 解决刷新页面，路由警告
    {
        path: "/:pathMatch(.*)*",
        component: () => import("@/views/error/404.vue")
    }
];
